<!-- 角色授权 -->
<template>
	<div class="authorization">
		<el-dialog title="角色授权" width="45%" height="40%" top="10vh" :visible.sync="dialogVisible"
			:close-on-click-modal="false" @close="close">
			<div style="width:100%;height: 460px;">
				<div style="height: 450px;overflow-x: hidden;overflow-y: scroll">
					<el-table	ref="multipleTable"
					:data="treeData" highlight-current-row size="mini" 
					@selection-change="handleSelectionChange" 
						style="border-radius: 6px; border:1px solid #EBEEF5; border-bottom: 0;" :header-cell-style="{color:'#333333',fontFamily:'PingFang SC',fontSize:'14px',fontWeight:500,background: '#F4F8FF',}" 
						row-key="arsId" :default-expand-all='false' 
						:tree-props="{ children: 'children' }">
						<el-table-column prop="arsName" label="资源名称"></el-table-column>
						<el-table-column label="资源" align="center" :reserve-selection="true"
						type="selection" width="300">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="btndiv">
				<el-button v-blur class="added" @click="submit">提 交</el-button>
				<el-button v-blur class="query" @click="close">返 回</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'authorization',
		data() {
			return {
				dialogVisible: false,
				multipleSelection:[],
				treeData: [{
					"arsId": "1",
					"arsName": "知识库",
					"children": [{
							"arsId": "3",
							"arsName": "法规制度库",
							"children": null
						},
						{
							"arsId": "4",
							"arsName": "审计案例库",
							"children": null
						},
						{
							"arsId": "5",
							"arsName": "审计要点库",
							"children": null
						}
					]
				}, {
					"arsId": "2",
					"arsName": "其他库",
					"children": [{
							"arsId": "6",
							"arsName": "法规制度库",
						},
						{
							"arsId": "7",
							"arsName": "审计案例库",
							"children": null
						},
						{
							"arsId": "8",
							"arsName": "审计要点库",
							"children": null
						}
					]
				},
				{"arsId": "9",
				"arsName": "知识库",
				"children":[{
							"arsId": "10",
							"arsName": "法规制度库",
						},
						{
							"arsId": "11",
							"arsName": "审计案例库",
							"children": null
						},
						{
							"arsId": "12",
							"arsName": "审计要点库",
							"children": null
						}
					]
				},
				{"arsId": "13",
				"arsName": "知识库",
				"children":[{
							"arsId": "14",
							"arsName": "法规制度库",
						},
						{
							"arsId": "15",
							"arsName": "审计案例库",
							"children": null
						},
						{
							"arsId": "16",
							"arsName": "审计要点库",
							"children": null
						}
					]
				},
				
				],
			}
		},
		mounted() {

		},
		methods: {
			close(){
				this.dialogVisible = false;
				this.$refs.multipleTable.clearSelection();
			},
			show() {
				this.dialogVisible = true;
			},
			submit(){
				
			},
			handleSelectionChange(val){
				console.log(val)
				this.multipleSelection = val;
			},
		}
	}
</script>

<style scoped lang='scss'>
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}


	.btndiv {
		text-align: center;
	}

	/deep/.el-table td.el-table__cell,
	.el-table th.el-table__cell {
		border-bottom: 1px solid #EBEEF5;
		border-right: 0px;
		width: 500px;
	}
	/* 给多选加label */
	/deep/th.el-table-column--selection {
	  .el-checkbox__input::after {
	    content: '资源';
	    position: relative;
	    left: 8px;
	    bottom: 1px;
	    font-weight: bold!important;
	    color: #333333!important;
	  }
	  .el-checkbox__inner {
	    /* display: none; */
		margin-left: 30px;
	  }
	}
</style>
